<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息容器滚动条修复演示</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
      }

      .demo-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }

      .demo-section {
        background: white;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .chat-layout {
        display: flex;
        height: 600px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        overflow: hidden;
      }

      .sidebar {
        width: 280px;
        background: white;
        border-right: 1px solid #e5e7eb;
        padding: 20px;
      }

      .chat-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #f9fafb;
      }

      .message-list {
        height: calc(600px - 200px); /* 固定高度，减去输入区域高度 */
        overflow-y: auto;
        padding: 16px;
        background: white;
        margin: 16px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
      }

      .input-area {
        background: white;
        padding: 20px;
        border-top: 1px solid #e5e7eb;
        margin-top: auto;
      }

      .message {
        padding: 12px 16px;
        margin: 8px 0;
        border-radius: 8px;
        max-width: 80%;
      }

      .user-message {
        background: #dbeafe;
        margin-left: auto;
        text-align: right;
      }

      .ai-message {
        background: #f3e8ff;
        margin-right: auto;
      }

      .typing-indicator {
        padding: 12px 16px;
        margin: 8px 0;
        background: #f3f4f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .typing-dots {
        display: flex;
        gap: 4px;
      }

      .typing-dots span {
        width: 8px;
        height: 8px;
        background: #6b7280;
        border-radius: 50%;
        animation: bounce 1.4s infinite;
      }

      .typing-dots span:nth-child(2) {
        animation-delay: 0.1s;
      }

      .typing-dots span:nth-child(3) {
        animation-delay: 0.2s;
      }

      @keyframes bounce {
        0%,
        60%,
        100% {
          transform: translateY(0);
        }
        30% {
          transform: translateY(-10px);
        }
      }

      .input-container {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        background: #f9fafb;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        padding: 12px;
      }

      .input-textarea {
        flex: 1;
        border: none;
        outline: none;
        resize: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        min-height: 60px;
        max-height: 120px;
      }

      .send-button {
        background: #3b82f6;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
      }

      .send-button:hover {
        background: #2563eb;
      }

      .send-button:disabled {
        background: #9ca3af;
        cursor: not-allowed;
      }

      /* 滚动条样式 */
      .message-list {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
      }

      .message-list::-webkit-scrollbar {
        width: 6px;
      }

      .message-list::-webkit-scrollbar-track {
        background: #f7fafc;
        border-radius: 3px;
      }

      .message-list::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 3px;
      }

      .message-list::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
      }

      .code-block {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 16px;
        margin: 16px 0;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.4;
        overflow-x: auto;
      }

      .highlight {
        background: #fff3cd;
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="demo-container">
      <h1>消息容器滚动条修复演示</h1>

      <div class="demo-section">
        <h2>修复前的问题</h2>
        <ul>
          <li>消息容器使用 <code>flex-1</code> 自适应高度，可能导致高度不稳定</li>
          <li>没有固定高度，消息过多时可能影响布局</li>
          <li>滚动条样式不够美观</li>
        </ul>
      </div>

      <div class="demo-section">
        <h2>修复后的效果</h2>
        <div class="chat-layout">
          <div class="sidebar">
            <h3>对话列表</h3>
            <p>侧边栏内容</p>
          </div>

          <div class="chat-main">
            <div class="message-list">
              <!-- 模拟消息内容 -->
              <div class="message user-message">你好，我想了解一下人工智能的发展历史</div>

              <div class="message ai-message">
                人工智能的发展可以追溯到1950年代。让我为您详细介绍...
              </div>

              <div class="message user-message">能具体说说机器学习的发展吗？</div>

              <div class="message ai-message">
                机器学习是人工智能的一个重要分支。它起源于统计学和模式识别...
              </div>

              <div class="message user-message">深度学习又是什么时候兴起的？</div>

              <div class="message ai-message">
                深度学习的概念可以追溯到1940年代，但真正兴起是在2010年代...
              </div>

              <div class="message user-message">现在最先进的AI模型有哪些？</div>

              <div class="message ai-message">目前最先进的AI模型包括GPT-4、Claude、Gemini等...</div>

              <div class="message user-message">这些模型有什么特点？</div>

              <div class="message ai-message">
                这些模型都具有以下特点：1. 大规模参数 2. 多模态能力 3. 强大的推理能力...
              </div>

              <div class="message user-message">未来AI会如何发展？</div>

              <div class="message ai-message">
                未来AI的发展方向包括：1. 更高效的计算 2. 更好的理解能力 3. 更强的创造力...
              </div>

              <div class="typing-indicator">
                <div class="typing-dots">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <span>AI正在思考...</span>
              </div>
            </div>

            <div class="input-area">
              <div class="input-container">
                <textarea
                  class="input-textarea"
                  placeholder="请输入您的消息..."
                  rows="3"
                ></textarea>
                <button class="send-button">发送</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h2>关键修改点</h2>

        <h3>1. 消息容器高度设置</h3>
        <div class="code-block">
          <!-- 修改前 -->
          &lt;div class="message-list flex-1 overflow-y-auto p-4"&gt;

          <!-- 修改后 -->
          &lt;div class="message-list h-[calc(100vh-200px)] overflow-y-auto p-4"&gt;
        </div>

        <h3>2. 滚动条样式优化</h3>
        <div class="code-block">
          /* 消息列表滚动条样式 */ .message-list { scrollbar-width: thin; scrollbar-color: #cbd5e0
          #f7fafc; } .message-list::-webkit-scrollbar { width: 6px; }
          .message-list::-webkit-scrollbar-track { background: #f7fafc; border-radius: 3px; }
          .message-list::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
          .message-list::-webkit-scrollbar-thumb:hover { background: #a0aec0; }
        </div>
      </div>

      <div class="demo-section">
        <h2>修复效果</h2>
        <ul>
          <li>
            ✅ 消息容器现在有 <span class="highlight">固定高度</span>，不会因为内容变化而影响布局
          </li>
          <li>✅ 超出高度的消息会显示 <span class="highlight">美观的滚动条</span></li>
          <li>✅ 滚动条样式统一，支持现代浏览器</li>
          <li>✅ 保持了原有的自动滚动到底部功能</li>
          <li>✅ 响应式设计，在不同屏幕尺寸下都能正常工作</li>
        </ul>
      </div>

      <div class="demo-section">
        <h2>使用说明</h2>
        <ol>
          <li>
            消息容器高度设置为 <code>calc(100vh-200px)</code>，其中200px是输入区域和边距的估算高度
          </li>
          <li>可以根据实际需要调整这个值，确保布局美观</li>
          <li>滚动条样式同时支持Webkit浏览器和Firefox</li>
          <li>原有的消息自动滚动功能保持不变</li>
        </ol>
      </div>
    </div>

    <script>
      // 演示滚动功能
      const messageList = document.querySelector('.message-list')

      // 自动滚动到底部
      function scrollToBottom() {
        messageList.scrollTop = messageList.scrollHeight
      }

      // 页面加载后滚动到底部
      window.addEventListener('load', scrollToBottom)

      // 模拟新消息添加
      setTimeout(() => {
        const newMessage = document.createElement('div')
        newMessage.className = 'message ai-message'
        newMessage.textContent = '这是一条新消息，演示滚动效果...'
        messageList.appendChild(newMessage)
        scrollToBottom()
      }, 2000)
    </script>
  </body>
</html>
